import { useSnapshot } from 'valtio';
import { Form } from 'szcd';
import { type IControlView } from '../base';

export interface IInputView extends IControlView {
  label: string;
  text: string;
}

const TextControl: React.FC<{ service: IInputView } & React.HTMLAttributes<HTMLDivElement>> = ({
  service,
  ...restProps
}) => {
  const snap = useSnapshot(service, { sync: true });

  return (
    <Form.Item label={snap.label && service.label} style={restProps.style}>
      {snap.text}
    </Form.Item>
  );
};

export default TextControl;
